{% extends 'base.html' %}
{% load static %}

{% block title %} Register {% endblock %}

{% block css %}
    <style>
        #avatar_img {
            margin-left: 20px;
        }
        #avatar {
            display: none;
        }
        .error {
            color:red;
        }
    </style>
    <script>
        {# onload功能是等网页所有的元素加载完成之后再执行这段代码 #}
        {#window.onload = function () {#}
        {#    $("#id_user").val('hello')#}
    </script>
{% endblock %}

{% block content %}
    <h3>注册页面</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-offset-3">
                <form id="form">
                    {# 以ajax方式提交数据 #}
                    {% csrf_token %}
                    {% for field in form %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }} <span class="error pull-right"></span>
                        </div>
                    {% endfor %}
                    <div class="form-group">
                        <label for="avatar" >
                            头像
                            <img id="avatar_img" src="{% static 'img/default.png' %}" alt="" width="60" height="60">
                        </label>
                        <input type="file" id="avatar" style="display: none">
                    </div>


                    <input type="button" class='btn btn-default reg_btn' value="注册"><span class="error"></span>
                </form>
            </div>
        </div>

    </div>

{% endblock %}


{% block js %}
{#    <script src="{% static 'jquery/jquery-3.3.1.min.js' %}"></script>#}
    <script>
        {# 头像图片预览  ,src=文件对象路径 #}
        $('#avatar').change(function () {
            {# 1获取用户选中的文件对象 #}
            var file_obj=$(this)[0].files[0];
             {# 2获取文件对象的路径 #}
            var reader=new FileReader();
            reader.readAsDataURL(file_obj);
            {# 等待reader 线程上传完成时，再修改属性 #}
            reader.onload = function () {
                {# 3修改img的src属性 #}
                $("#avatar_img").attr("src",reader.result)
            }


        });

        {# 提交按键事件，基于ajax #}
        $(".reg_btn").click(function () {
            {#查看表单提交的数据#}
            {#console.log($("#form").serializeArray());#}
            var request_data=$("#form").serializeArray();
            var formdata = new FormData();
            {#利用循环插入formdata#}
            $.each(request_data,function (index,data) {
                formdata.append(data.name,data.value)

            });
            {#原始手工方式插入formdata#}
            {#formdata.append('user',$("#id_user").val());#}
            {#formdata.append('pwd',$("#id_pwd").val());#}
            {#formdata.append('re_pwd',$("#id_re_pwd").val());#}
            {#formdata.append('email',$("#id_email").val());#}
            {#formdata.append('csrfmiddlewaretoken',$("[name='csrfmiddlewaretoken']").val());#}

            formdata.append('avatar',$("#avatar")[0].files[0]);
            $.ajax({
            {# 提交数据至当前页面 #}
                url:'',
                type:'post',
            {# 表单上传图片时，下面的两个选择要设置为False #}
                contentType:false,
                processData:false,
                data:formdata,
                success:function (data) {
                    {#console.log(data)#}
                    if(data.user) {
                    {#    注册成功#}
                        location.href='{% url "login" %}'
                    }
                    else {
                    {#    注册失败，处理错误数据#}
                    {#    console.log(data.msg)#}
{#                        清空上一次错误信息和标签#}
                        $("span.error").html("");
                        $('.form-group').removeClass("has-error");

                        {#显示本次错误信息#}
                        $.each(data.msg,function (field,error_list) {
                            {#console.log(field,error_list);#}
                            if (field == '__all__'){
                                {#显示全局错误信息，如果两次密码不相符#}
                                $("#id_re_pwd").next().html(error_list[0]).parent().addClass('has-error')
                            }
                            {#                            各个文本框的下一个对象即span标签，显示错误信息#}
                            $("#id_"+field).next().html(error_list[0]);
                            $("#id_"+field).parent().addClass('has-error');

                        })
                    }
                }
            })
        });

    </script>

{% endblock %}